<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/top.css">
  <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="css/login-ti.css">
  <link rel="stylesheet" href="css/top-hover.css">
  <title>品牌联名</title>


  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: rgb(255, 255, 255);
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      background-position: center;
      background-size: 100% 100%;
    }

    .bgimg {
      width: 100%;
      height: 70%;
      position: relative;
      top: 124px;
      left: 0;
    }

    /* 
    导航栏颜色
    */
    .top-f ul li:nth-child(5) a {
      color: #f94915;
      font-weight: 700;
    }

    .top .top-f ul li:nth-child(1) a {
      color: #ffffff;
      font-weight: 400;
    }


    /* logo */


    .logo-main ul {
      display: flex;

      flex-wrap: wrap;




    }

    .logo-main ul li {
      text-align: center;
      margin-bottom: 20px;
      width: 12.5%;
      position: relative;
    }

    .logo-main ul li::after {
      content: '';
      width: 1px;
      height: 30px;
      background-color: #999;
      position: absolute;
      right: 0;
      top: 10px;
    }

    .logo-main ul li img {
      width: 80%;
    }

    .logo-main ul li:nth-child(1) {
      background-color: #f2f2f2;
    }

    .logo-main {
      box-sizing: border-box;
      padding-top: 40px;

    }

    #gengduo {
      display: none;
    }


    /* Story */

    .Story {

      width: 1262px;
      margin: 0 auto;
      background-color: #f2f2f2;
      height: 380px;
      display: flex;
    }

    .Story-left {
      box-sizing: border-box;
      padding: 30px 50px 0 50px;
      width: 40%;
      height: 100%;
      background-color: #d7d7d7;
    }

    .Story-left p:nth-child(2) {
      width: 76px;
      height: 19px;
      background-image: url(img/tit.png);
      margin: 30px 0 30px 0;
    }

    .Story-left p:nth-child(1) {
      text-align: center;
    }

    .Story-left p:nth-child(3) {
      line-height: 22px;
    }


    /* Story-right  轮播图 */

    .Story-right {
      box-sizing: border-box;
      padding: 30px;
      width: 60%;
      height: 100%;

    }

    .wogan {
      width: 100%;
      height: 100%;
      background-color: rgb(139, 32, 32);
    }

    .banner1 {
      width: 100%;
      height: 100%;
      /* position: absolute;
      left: 0;
      top: 0; */

    }

    .banner1 .swiper-slide img {
      width: 100%;
    }

    .banner1 .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</head>

<body>



  <div class="top">
    <div class="bg-top">
      <ul class="top-left">
        <li></li>
        <li>
          <a href="#">北京地区暂停发货说明，点击查看详情></a>
        </li>
      </ul>
      <ul class="top-right">
        <li class="log-btn"><a href="#">你好，请登录</a></li>
        <li><a href="shoppingCart.html"><span></span> 购物车 <span class="Product-num">0</span></a></li>
        <li><a href="#"> <span></span>领取中心</a></li>
        <li><a href="#"> <span></span>微信商城</a></li>
      </ul>


    </div>
    <div class="top-f">
      <ul>
        <li><a href="index.html" class="top-f-active"> 商城首页</a></li>
        <li class="show">
          <a href="shouban.html"> 雕塑手办</a>
          <div class="hide1">
            <p><a href="#">大型雕塑</a></p>
            <p><a href="#">中型雕塑</a></p>
            <p><a href="#">限定手办</a></p>
            <p><a href="#">迷你手办</a></p>
            <p><a href="#">手办</a></p>
            <p><img src="img/霞.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="plushToy.html"> 服饰毛绒</a>

          <div class="hide1">
            <p><a href="#">毛绒玩偶</a></p>
            <p><a href="#">卫衣&夹克</a></p>
            <p><a href="#">T恤</a></p>
            <p><a href="#">K/DA服饰</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/佐伊111.webp" alt=""></p>
          </div>
        </li>
        <li class="show"><a href="Life.html"> 生活周边</a>

          <div class="hide1 ">
            <p><a href="#">3C配件</a></p>
            <p><a href="#">日常用品</a></p>
            <p><a href="#">海报艺术</a></p>
            <p><a href="#">其他</a></p>
            <p><img src="img/哥哥.webp" alt=""></p>
          </div>
        </li>
        <li><a href="#"> 品牌联名</a></li>
        <li class="show"><a href="Promotion.html"> 促销专区</a>

          <div class="hide1 hide2">
            <p><a href="#">LPL系列专区</a></p>
            <p><img src="img/didi.webp" alt=""></p>
          </div>
        </li>
        <li><a href="#"> 手办收藏</a></li>
      </ul>
      <ul>
        <li>

          <input type="text" placeholder="洛与霞雕塑"><span></span>
        </li>
      </ul>
    </div>
  </div>

  <div class="spr-service">
    <p></p>
    <p>联系客服</p>
  </div>


  <div class="bgimg">

    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202202/20220214121804_581955.jpg)">
        </div>
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202112/20211210174034_761407.jpg)">
        </div>
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202112/20211210174046_935879.jpg)">
        </div>
        <div class="swiper-slide"
          style="background-image:url(https://game.gtimg.cn/images/daojushop/zb/ad/202107/20210706143307_591304.jpg)">
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Arrows -->
      <!-- <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div> -->
    </div>

    <div class="logo-main">
      <ul class="shouqi">
        <li><img src="https://js01.daoju.qq.com/zb/lolriotmall/pc/images/cooperation/all.png" alt=""></li>
        <li><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202104/20210425201650_95105.png" alt=""></li>
        <li><img src="img/logo1.png" alt=""></li>
        <li><img src="img/logo2.png" alt=""></li>
        <li><img src="img/logo3.png" alt=""></li>
        <li><img src="img/logo4.png" alt=""></li>
        <li><img src="img/logo5.png" alt=""></li>
        <li><img src="img/logo6.png" alt=""></li>
        <li><img src="img/logo7.png" alt=""></li>
        <li><img src="img/logo8.png" alt=""></li>
        <li><img src="img/logo9.png" alt=""></li>
        <li><img src="img/logo10.png" alt=""></li>
        <li><img src="img/logo11.png" alt=""></li>
        <li><img src="img/logo12.png" alt=""></li>
        <li><img src="img/logo13.png" alt=""></li>
        <li><img src="img/logo14.png" alt=""></li>
        <li><img src="img/logo15.png" alt=""></li>
      </ul>
      <ul id="gengduo">
        <li><img src="https://js01.daoju.qq.com/zb/lolriotmall/pc/images/cooperation/all.png" alt=""></li>
        <li><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202104/20210425201650_95105.png" alt=""></li>
        <li><img src="img/logo1.png" alt=""></li>
        <li><img src="img/logo2.png" alt=""></li>
        <li><img src="img/logo3.png" alt=""></li>
        <li><img src="img/logo4.png" alt=""></li>
        <li><img src="img/logo5.png" alt=""></li>
        <li><img src="img/more.png" alt=""></li>

      </ul>
    </div>
    <div class="Story-g">
      <div class="Story">
        <div class="Story-left">
          <p><img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202104/20210425201650_95105.png" alt=""></p>
          <p></p>
          <p>良笑塑美(Good Smile Arts Shanghai)是由日本知名手办厂商Good Smile Company(GSC)于
            2018年在中国发起成立的手办衍生品开发制作公司，未来将与英雄联盟展开深度合作，在可动手办、比例雕塑等品类持续给召唤师们带来高品质手办产品。</p>
        </div>
        <div class="Story-right">

          <div class="wogan">
            <div class="swiper-container banner1">
              <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/佐伊111.webp" alt=""></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"><img src="img/佐伊111.webp" alt=""></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"><img src="img/佐伊111.webp" alt=""></div>

              </div>
              <!-- Add Pagination -->
              <!-- <div class="swiper-pagination"></div> -->
            </div>
          </div>


        </div>
      </div>

    </div>
  </div>


  <!-- login-->
  <div class="box-log">
    <div class="box-position">
      <ul class="log-top">
        <li class="log-top-active">QQ账号登录</li>
        <li id="w-99">微信账号登录</li>
      </ul>
      <ul class="log-main">
        <li class="log-main-active">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p>推荐使用快速安全登录，防止盗号。</p>
          <div class="login-qq">
            <input type="text" id="user" placeholder="账号"><span class="s1"></span><br>
            <input type="text" id="pawd" placeholder="密码"><span class="s2"></span><br>
            <input type="button" value="授权登录" id="btn">
          </div>
          <p class="fool-text">
            <a href="">忘记密码</a>
            <a href="register.html">注册新账号</a>
            <a href="" class="last">意见反馈</a>
          </p>
        </li>
        <li class="erweima">
          <p>微信和QQ是两个独立账号，账号信息不互通</p>
          <h3>帐号密码登录</h3>
          <p><img src="img/er.jpg" alt=""></p>
          <p>微信扫一扫</p>
          <p>“聚诚品”</p>
        </li>
      </ul>

    </div>
  </div>
  <script src="js/swiper-3.4.2.min.js"></script>
  <script src="js/jq.js"></script>
  <script src="js/login-ti.js"></script>
  <script src="js/axios.js"></script>
  <script src="js/islogin.js"></script>
  <script src="js/hover.js"></script>

  <script>
    var swiper = new Swiper('.swiper-container',
      {
        loop: true,
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        // nextButton: 'null',
        // prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        effect: 'fade',
        autoplay: 3000
      });


    //获取logo 处 更多 和 收起 按钮
    let pull = document.querySelector('.logo-main .shouqi li:last-child');
    let pull2 = document.querySelector('#gengduo li:last-child');
    //对应的ul
    let logoM = document.querySelector('.logo-main .shouqi');
    let logoM2 = document.querySelector('#gengduo');
    //点击事件
    pull.onclick = function () {
      logoM.style.display = "none";
      logoM2.style.display = "block";
      logoM2.style.display = "flex"


    }
    //点击事件
    pull2.onclick = function () {
      logoM.style.display = "block";
      logoM.style.display = "flex"
      logoM2.style.display = "none";

    }


    //story 轮播图
    var myswiper = new Swiper('.banner1',
      {
        // pagination: '.swiper-pagination',
        slidesPerView: 3,
        // paginationClickable: true,
        spaceBetween: 30




      });



  </script>
</body>

</html>